<template>
    <el-card class="box-card">
        <el-calendar v-model="value" id="calendar">
            <template
                    slot="dateCell"
                    slot-scope="{date, data}">
                <div>
                    <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
<!--                    <p :class="data.isSelected ? 'is-selected' : ''">-->
<!--                        {{ data.isSelected ? '✔️' : ''}}-->
<!--                    </p>-->
                    <div v-for="item in calendarData">
                        <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!==-1">
                            <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!==-1">
                                <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                                    <div class="is-selected">{{item.things}}</div>
                                </el-tooltip>
                            </div>
                            <div v-else></div>
                        </div>
                        <div v-else></div>
                    </div>
                </div>
            </template>
        </el-calendar>
    </el-card>

</template>

<script>
    export default {
        name: "calendar",
        data() {
            return {
                calendarData: [
                    { months: ['05'], days: ['29'],things: '14:00-16:00' },
                    { months: ['06'], days: ['20'],things: '14:00-16:00' },
                    { months: ['06'], days: ['06'],things: '19:00-20:00' },
                ],
                value: new Date()
            }
        },
        methods:{

        }
    }
</script>

<style scoped>
    .box-card {
        margin-top: 20px;
        width: 400px;
        height: 700px;
    }

    .calendar-day {
        text-align: center;
        color: #202535;
        line-height: 20px;
        font-size: 12px;
    }

    .is-selected {
        color: #F8A535;
        font-size: 10px;
        margin-top: 5px;
    }

    #calendar .el-button-group > .el-button:not(:first-child):not(:last-child):after {
        content: '当月';
    }
</style>